<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>主页</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js" type="text/javascript"
            charset="UTF-8"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="UTF-8"></script>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <button type="button" class="layui-btn layui-btn-lg" id="addBtn" style="width: 100%">新增</button>
            <hr/>
            <div class="layui-progress" lay-filter="demo" lay-showPercent="true">
                <div class="layui-progress-bar layui-bg-orange" lay-percent="100%"></div>
            </div>
            <table class="layui-table layui-hide" id="dataList" lay-filter="dataList"></table>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    $().ready(function () {
        layui.use(['layer', 'form', "element", 'table', 'laypage'], function () {
            let layer, form, element, table, laypage;
            layer = layui.layer;
            form = layui.form;
            element = layui.element;
            table = layui.table;
            laypage = layui.laypage;
            var dataLength = 0;
            var tableIns = null;
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/listAll",
                dataType: "json",
                beforeSend: function () {
                    element.progress('demo', '0%');
                },
                success: function (result) {
                    dataLength = result.length;
                    tableIns = table.render({
                        elem: '#dataList'
                        , cols: [[
                            {field: 'empId', title: '编号'}
                            , {field: 'empName', title: '姓名'}
                            , {field: 'empLogin', title: '登录名'}
                            , {field: 'empHiredate', title: '入职日期'}
                            , {field: 'empAge', title: '年龄'}
                            , {field: 'empPwd', title: '密码', hide: true}
                            , {title: '操作', fixed: 'right', align: 'center', toolbar: '#barDemo'}
                        ]]
                        , data: result
                        , skin: 'line'
                        , page: true
                        , height: 'full-100'
                        , limits: [10, 20, 50]
                        , limit: 10
                        , size: 'lg'
                        , cache: false
                        , id: 'dataList'
                    });
                    element.progress('demo', '100%');
                },
                error: function () {
                    layer.alert("失败");
                }
            });
            table.on('tool(dataList)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('详细信息' + JSON.stringify(data));
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        $.ajax({
                            type: "get",
                            url: "${pageContext.request.contextPath}/toDel?id=" + data.empId,
                            success: function () {
                            }
                        });
                        layer.close(index);
                        location.reload();
                    });
                } else if (obj.event === 'edit') {
                    // layer.alert('编辑行：<br>' + JSON.stringify(data))
                    layer.open({
                        type: 1,
                        title: '新增表单',
                        content: '自定义HTML内容'
                    });
                } else if (obj.event === 'addBtn') {
                    layer.alert('????');
                }
            });
        });
    });
</script>
</body>
</html>
